<template>
  <div class="side-menu-container">
    <!-- 公司名称和Logo -->
    <div class="company-header">
      <div class="company-logo">
        <el-icon><OfficeBuilding /></el-icon>
      </div>
      <h1 class="company-name">油耗管理平台</h1>
    </div>

    <!-- 导航菜单 -->
    <el-menu
        router
        :default-active="$route.path"
        class="system-menu"
        background-color="#001529"
        text-color="#b7bdc3"
        active-text-color="#fff"
    >
      <el-menu-item index="/dashboard">
        <el-icon><DataLine /></el-icon>
        <span>数据看板</span>
      </el-menu-item>
      <el-menu-item index="/adminList">
        <el-icon><User /></el-icon>
        <span>管理员管理</span>
      </el-menu-item>
      <el-menu-item index="/userList">
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/carList">
        <el-icon><Eleme /></el-icon>
        <span>爱车管理</span>
      </el-menu-item>
      <el-menu-item index="/recordList">
        <el-icon><Coin /></el-icon>
        <span>油耗管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import {
  OfficeBuilding,
  DataLine,
  User,
  Eleme,
  Coin
} from '@element-plus/icons-vue'
</script>

<style scoped>
.side-menu-container {
  height: 100%;
}

.company-header {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.company-logo {
  margin-right: 12px;
  font-size: 24px;
  color: #fff;
}

.company-name {
  margin: 0;
  font-size: 18px;
  color: #fff;
  white-space: nowrap;
}

.system-menu {
  border-right: none;
  height: calc(100% - 60px);
}
</style>